<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
    伪类（不存在的类，特殊的类）
    伪类用来描述一个元素的状态，第一个元素，被点击的元素，鼠标悬停元素
    */
    /* 选择第一个子元素 */
    ul li:first-child {
      color: red;
    }

    /* 同类型的 */
    ul li:first-of-type {
      font-size: 30px;
    }

    /* ：not否定 */
    ul li:not(:nth-of-type(3)) {
      color: aqua;
    }

    /* 没有访问过的链接 */
    a:link {
      color: red;
    }

    /* 访问过的链接 */
    a:visited {
      color: burlywood;
    }
  </style>
</head>

<body>
  <ul>
    <span>span111</span>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
  </ul>

  <a href="https://www.baidu.com">访问过的连接</a>
  <br>
  <a href="https://www.baidu111.com">没访问过的连接</a>
</body>

</html>
<!-- 
  理解了，以下是CSS中的一些常见伪类选择器，包括一些不太常见但有用的。请注意，这个列表可能并不详尽无遗，因为CSS规范可能随着时间的推移而更新。

### 1. **基本伪类**

- `:active`：激活状态的元素。
- `:focus`：获得焦点的元素。
- `:hover`：鼠标悬停时的状态。
- `:link`：未访问链接的状态。
- `:visited`：已访问链接的状态。
- `:target`：被相关URL指向的元素。

### 2. **UI元素状态伪类**

- `:checked`：被选中的复选框或单选按钮。
- `:default`：表示用户代理默认选择的元素。
- `:disabled`：禁用状态的元素。
- `:enabled`：启用状态的元素。
- `:indeterminate`：处于不定状态的复选框。
- `:optional`：没有"required"属性的表单元素。
- `:required`：带有"required"属性的表单元素。
- `:valid`：包含有效值的表单元素。
- `:invalid`：包含无效值的表单元素。
- `:in-range`：在[min, max]范围内的表单元素。
- `:out-of-range`：超出[min, max]范围的表单元素。

### 3. **结构性伪类**

- `:first-child`：父元素下的第一个子元素。
- `:last-child`：父元素下的最后一个子元素。
- `:nth-child()`：根据子元素的位置选择元素。n：全部，2n或者even:偶数，2n+1或者odd:奇数
- `:nth-last-child()`：根据子元素的倒数位置选择元素。
- `:nth-of-type()`：根据相同类型子元素的位置选择元素。
- `:nth-last-of-type()`：根据相同类型子元素的倒数位置选择元素。
- `:only-child`：是其父元素的唯一子元素。
- `:only-of-type`：是相同类型的子元素中的唯一一个。

### 4. **用户界面相关伪类**

- `:root`：文档的根元素。
- `:empty`：没有子元素的元素。

### 5. **其他伪类**

- `:not()`：不匹配给定选择器的元素。
- `:matches()`（或`:is()`）：与给定选择器匹配的元素。
- `:nth-match()`：相对于同类元素的位置选择元素。

这是一个比较全面的伪类选择器列表。了解和熟练使用这些选择器将使你能够更灵活地选择和样式化文档中的元素。
如果有更新的伪类或选择器，建议查阅最新的CSS规范。
 -->